import { FC, ReactNode } from "react";
import styles from "./index.module.less";

interface BorderCardProps {
  title: ReactNode;
  children?: ReactNode;
  width?: string | number;
  height?: string | number;
  operArea?: ReactNode;
}

const BorderCard: FC<BorderCardProps> = (props: BorderCardProps) => {
  return (
    <>
      <div
        className={styles["border-card"]}
        style={{ width: props.width || "100%", height: props.height || "100%" }}
      >
        <div className={styles["border-card-title"]}>{props.title}</div>

        {/* 样式部分 */}
        <div className={styles["border-card-header"]}></div>
        <div className={styles["border-card-body"]}></div>
        <div className={styles["border-card-footer"]}></div>
        {/* 内容部分 */}
        {/* 头部 */}
        <div className={styles["content-header"]}>
          {/* 这边是头部操作 */}
          {/* <div className={styles["content-header-title"]}>{props.title}</div>
          <div className={styles["content-header-desc"]}>{props.operArea}</div> */}
        </div>
        <div className={styles["content-body"]}>{props.children}</div>
      </div>
    </>
  );
};

export default BorderCard;
